<template>
	<view>
		<view class="nav2">
			<u-navbar title="性格解析" bgColor="transparent" :fixed="false" autoBack>
			</u-navbar>
		</view>
		<u-gap height="20"></u-gap>
		<view class="m30">
			<view class="bgFff radius30 flex-jus item mb30 box_shadow" v-for="(item,index) in listData" :key="index" :style="'backgroundImage: linear-gradient(to bottom right, #fff, #fff, ' + item.color + ')'">
				<view class="flex">
					<image src="../static/housekeeping/star.png" mode="" style="width: 120rpx;height: 120rpx;"></image>
					<view class="ml30 flex-jus flex-col flex-start info-box">
						<view class="f40 c343 bold">{{item.name}}</view>
						<view class="f24 c343">{{item.text}}</view>
					</view>
				</view>
				<view class="">
					<u-icon name="arrow-right" size="14" color="#343434"></u-icon>
				</view>
			</view>
		</view>
	</view>
</template>	  
<script>
	import {} from '@/common/api.js'
	export default {
		name:'',
		data() {
			return {
				listData:[
					{
						name:'INTP',
						text:'思绪飞扬的学者',
						color:'#ECE2FF'
					},
					{
						name:'INFJ',
						text:'精神世界的引路人',
						color:'#E1F4CA'
					},
					{
						name:'ESFP',
						text:'思绪飞扬的学者',
						color:'#FFF3C1'
					},
					{
						name:'ESTP',
						text:'思绪飞扬的学者',
						color:'#FFF3C1'
					},
					{
						name:'ISTP',
						text:'思绪飞扬的学者',
						color:'#ECE2FF'
					},
					{
						name:'ESFJ',
						text:'思绪飞扬的学者',
						color:'#aed7e1'
					}
				]
			}
		},
		onLoad(option) {
			
		},
		methods: {
			
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #FEF4E8;
	}
	.item{
		padding: 30rpx 30rpx 10rpx 30rpx;
		background-color: #fff;
		.info-box{
			height: 90rpx;
		}
	}
</style>
